<template>
  <view class="tab-child-wrap" :style="{ height: height }">
    <view
      :class="['tab']"
      :style="{ color: current === index || (index === 4 && hasCoupon) ? selectColor : '' }"
      v-for="(item, index) in list"
      :key="index"
      @tap="handleChangeTab(index)"
    >
      <view class="tab__coupon" v-if="item.value === '优惠券'">
        <image class="tab__coupon--icon" :src="hasCoupon ? unChecked : checked" />
      </view>
      <view>
        {{ item.value }}
      </view>
      <view class="tab__price" v-if="item.value === '劵后价'">
        <view
          class="iconfont icon-shengxu tab__price--top"
          :style="{ color: priceSortStatus === 'top' ? selectColor : '#999999' }"
        ></view>
        <view
          class="iconfont icon-shengxu tab__price--bottom"
          :style="{ color: priceSortStatus === 'bottom' ? selectColor : '#999999' }"
        ></view>
      </view>
    </view>
  </view>
</template>

<script>
import { unChecked, checked } from '@/tool/static-img';

export default {
  props: {
    current: {
      type: Number,
      default: 0,
    },
    height: {
      type: String,
      default: '60rpx',
    },
    priceSortStatus: {
      type: String,
      default: 'normal',
    },
    hasCoupon: {
      type: Boolean,
      default: false,
    },
    list: {
      type: Array,
      default: [],
    },
    selectColor: {
      type: String,
      default: 'ff6034',
    },
  },
  data() {
    return {
      unChecked,
      checked,
    };
  },
  methods: {
    handleChangeTab(index) {
      this.$emit('handleChangeChildTab', index);
    },
  },
};
</script>

<style lang="less">
.tab-child-wrap {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  padding: 0 32rpx;
  background-color: #ffffff;

  .tab {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0 32rpx;
    color: #999999;
    &__price {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      height: 24rpx;
      margin-left: 4rpx;
      &--top {
        font-size: 10rpx;
      }
      &--bottom {
        font-size: 10rpx;
        transform: rotate(180deg);
      }
    }
    &__coupon {
      margin-right: 4rpx;
      &--icon {
        width: 24rpx;
        height: 24rpx;
      }
    }
  }
}
</style>
